var MAPS = ['3,3,3,3,3,3,3,3,3,3,6,3,4,1,1,1,2,1,1,1,1,1,6,3,1,5,3,3,3,1,1,2,1,1,1,1,1,5,1,4,1,1,1,1,1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,4,9,1,1,1,1,1,2,1,1,1,1,4,1,1,1,10,4,1,1,1,1,2,1,1,1,4,4,1,1,1,9,1,1,1,1,1,2,1,1,1,1,1,1,1,1,10,4,1,1,1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1'];

$(document).ready(function() {
	var canvas = document.getElementById("canvas");
	var stage = new JTopo.Stage(canvas);
	//showJTopoToobar(stage);
	
	var mapLayer = new JTopo.Scene(stage);//地图层
	mapLayer.mode = 'select';
	mapLayer.areaSelect = false;
				
	var effectLayer = new JTopo.Scene(stage);
	effectLayer.mode = 'select';
	effectLayer.areaSelect = false;
	
	var spriteLayer = new JTopo.Scene(stage);//人物层
	spriteLayer.mode = 'select';
	spriteLayer.areaSelect = false;

				
	var rows = 10;
	var cols = 15;
	var tileWidth = 40;
	var tileHeight = 40;
	
	var boxTileId = 4;
	
	var sprite = new JTopo.Node();
	sprite.setImage('./img/game/sprite.png', true);
	sprite.shadow = false;
	sprite.showSelected = false;
	sprite.dragable = false;			
	sprite.tileRow = 2;
	sprite.tileCol = 3;
	sprite.setLocation(sprite.tileCol * tileWidth, sprite.tileRow * tileHeight - 20);								
	spriteLayer.add(sprite);
	
	window.addEventListener('keydown', function(e){
		var key = e.which;
		var LEFT = 37;
		var RIGHT = 39;
		var UP = 38;
		var DOWN = 40;
		var SHIFT = 16;
		
		if(key == LEFT && sprite.tileCol > 0){
			var nextTileId = tiles[sprite.tileRow][sprite.tileCol-1].tileId;
			if(nextTileId != '1') return;
			sprite.x -= 40;
			sprite.tileCol--;
		}else if(key == RIGHT && sprite.tileCol+1 < cols){
			var nextTileId = tiles[sprite.tileRow][sprite.tileCol+1].tileId;
			if(nextTileId != '1') return;
			sprite.x += 40;
			sprite.tileCol++;
		}else if(key == UP && sprite.tileRow > 0){
			var nextTileId = tiles[sprite.tileRow-1][sprite.tileCol].tileId;
			if(nextTileId != '1') return;
			sprite.y -= 40;
			sprite.tileRow--;
		}else if(key == DOWN && sprite.tileRow+1 < rows){
			var nextTileId = tiles[sprite.tileRow+1][sprite.tileCol].tileId;
			if(nextTileId != '1') return;
			sprite.y += 40;
			sprite.tileRow++;
		}else if(key == SHIFT){
			var ball = new JTopo.Node();
			ball.tileRow = sprite.tileRow;
			ball.tileCol = sprite.tileCol;
			ball.setImage('./img/game/ball.png',true);
			ball.setLocation(ball.tileCol * tileWidth, ball.tileRow * tileHeight);	
			ball.shadow = false;
			ball.showSelected = false;
			ball.dragable = false;
			function bom(node){
				if(node.tileId != boxTileId) return;// 只有箱子才可以炸开
				node.tileId = 1;
				node.setImage('./img/game/'+node.tileId+'.png',true);
			}
			
			JTopo.Animate.stepByStep(ball, {scaleX: 1.2, scaleY: 1.2}, 1500).start().onStop(function(){
				JTopo.Animate.stepByStep(ball, {scaleX: 3, scaleY: 0.8}, 80).start().onStop(function(){
					JTopo.Animate.stepByStep(ball, {scaleY: 3, scaleX: 0.8}, 60).start().onStop(function(){
						if(ball.tileRow > 0){
							var up = tiles[ball.tileRow-1][ball.tileCol];
							bom(up);
						}
						if(ball.tileCol > 0){
							var left = tiles[ball.tileRow][ball.tileCol-1];
							bom(left);
						}
						if(ball.tileRow+1 < rows){
							var down = tiles[ball.tileRow+1][ball.tileCol];
							bom(down);
						}
						if(ball.tileCol+1 < cols){
							var right = tiles[ball.tileRow][ball.tileCol+1];
							bom(right);
						}
						effectLayer.remove(ball);
					});
				});
			});
			
			effectLayer.add(ball);
		}
	});
	var tiles = [];
	function initMapScene(){
		tiles = [];
		for(var i=0; i<rows; i++){
			var rowNodes = [];
			for(var j=0; j<cols; j++){
				var node = new JTopo.Node();
				node.tileRow = i;
				node.tileCol = j;
				node.setSize(tileWidth, tileHeight);
				node.setLocation(node.tileCol * tileWidth, node.tileRow * tileHeight);
				mapLayer.add(node);
				node.shadow = false;
				node.showSelected = false;
				node.dragable = false;
				node.tileId = 1;
				node.setImage('./img/game/' + node.tileId + '.png');
				rowNodes.push(node);
			}
			tiles.push(rowNodes);
		}
	}
	initMapScene();
	
	mapLayer.click(function(e){
		var node = e.target;
		console.log(currTile);
		if(node && currTile){
			var tileId = currTile.attr('tileId');
			node.tileId = tileId;
			node.setImage('./img/game/' + node.tileId  + '.png');
		}
	});
	
	function loadMap(tiles, datas){
		var nodes = JTopo.stage.find('node');
		var rowNodes = [];
		var n = 0;
		for(var i=0; i<rows; i++){
			for(var j=0; j<cols; j++){
				var node = tiles[i][j];
				node.tileId = datas[n++];
				node.setImage('./img/game/' + node.tileId + '.png');
			}
		}
	}
	var datas = MAPS[0];
	loadMap(tiles, datas.split(','));
	
	var currTile;
	// 左侧图标列表
	for(var i = 1; i<= 10; i++){
		var icon = $('<img style="margin-left:6px;" src="./img/game/' + i + '.png" draggable="true" ondragstart="drag(event)">');
		$("#menu").append(icon);
		
		icon.attr('tileId', i);
		icon.click(function(){
			currTile = $(this);
		});
	}
});
